<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
    <link rel="stylesheet" th:href="@{/common/css/sapar.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/common/css/common.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/frontstatic/ticket/css/query_order_step.css}" />
    <script type="text/javascript" th:src="@{/common/js/jquery.js}"></script>
    <script type="text/javascript" th:src="@{/common/js/sapar.js}"></script>
    <script type="text/javascript" th:src="@{/common/js/WdatePicker.js}"></script>
<title>机票查询</title>
</head>

<body>
    <div id="saper-container">
        <div id="saper-hd"></div>
        <div id="saper-bd">
            <div class="subfiled clearfix">
                <h2>机票查询</h2>
            </div>
            <div class="subfiled-content">
                <div class="steps">
                    <ol>
                        <li id="l1" class="active">
                            <i>1</i>
                            <span class="tsl">查询航班</span>
                        </li>
                        <li id="l2" >
                            <i>2</i>
                            <span class="tsl">预订机票</span>
                        </li>
<!--                        <li id="l3" >-->
<!--                            <i>3</i>-->
<!--                            <span class="tsl">核对信息</span>-->
<!--                        </li>-->
                        <li id="l3" >
                            <i>√</i>
                            <span class="tsl">完成预订</span>
                        </li>
                    </ol>
                </div>

                <form name="f1" id="f1" action="?m=system&amp;c=myInfo&amp;a=updateInfo&amp;type=1" method="post">
                    <div class="search-box clearfix">
<!--                        <div class="kv-item clearfix">-->
<!--                            <label>航程类型：</label>-->
<!--                            <div class="kv-item-content">-->
<!--                                <span class="choose">-->
<!--                                    <input type="radio" name="type" attr="dancheng" checked>-->
<!--                                    <span class="text">单程</span>-->
<!--                                </span>-->
<!--                                <span class="choose">-->
<!--                                    <input type="radio" name="type" attr="wangfan">-->
<!--                                    <span class="text">往返</span>-->
<!--                                </span>-->
<!--&lt;!&ndash;                                <span class="choose">&ndash;&gt;-->
<!--&lt;!&ndash;                                    <input type="radio" name="type" attr="zhongzhuan">&ndash;&gt;-->
<!--&lt;!&ndash;                                    <span class="text">中转联程</span>&ndash;&gt;-->
<!--&lt;!&ndash;                                </span>&ndash;&gt;-->
<!--&lt;!&ndash;                                <span class="choose">&ndash;&gt;-->
<!--&lt;!&ndash;                                    <input type="checkbox">&ndash;&gt;-->
<!--&lt;!&ndash;                                    <span class="text">隐藏特殊政策</span>&ndash;&gt;-->
<!--&lt;!&ndash;                                </span>&ndash;&gt;-->
<!--&lt;!&ndash;                                <span class="choose">&ndash;&gt;-->
<!--&lt;!&ndash;                                    <input type="checkbox">&ndash;&gt;-->
<!--&lt;!&ndash;                                    <span class="text">柜台版</span>&ndash;&gt;-->
<!--&lt;!&ndash;                                </span>&ndash;&gt;-->
<!--                            </div>-->
<!--                        </div>-->
                        <div class="content">
                            <div class="kv-item clearfix">
                                <label>出发城市：</label>
                                <div class="kv-item-content">
                                    <input type="text" placeholder="出发城市" id="startCity">
                                </div>
                            </div>
                            <div class="kv-item clearfix">
                                <label>到达城市：</label>
                                <div class="kv-item-content">
                                    <input type="text" placeholder="到达城市" id="endCity">
                                </div>
                            </div>
                            <div class="kv-item clearfix">
                                <label>出发时间：</label>
                                <div class="kv-item-content">
                                    <input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" placeholder="出发时间" id="startTime">
                                </div>
                            </div>
                            <a href="javascript:void(0)" id="exchangeCity" class="search-trade" title="互换出发到达城市"></a>
                        </div>

                        <a href="javascript:;" class="sapar-btn sapar-btn-recom query-btn">查询</a>
                    </div>
                </form>

<!--                <div class="subfiled-style2 clearfix">-->
<!--                    <h2>重庆到南京</h2>-->
<!--                </div>-->
<!--                <div class="table-tab">-->
<!--                    <ul class="clearfix">-->
<!--                        <li><a href="javascript:;"><span>2014-12-9</span><span>星期一</span></a></li>-->
<!--                        <li><a href="javascript:;"><span>2014-12-9</span><span>星期一</span></a></li>-->
<!--                        <li><a href="javascript:;"><span>2014-12-9</span><span>星期一</span></a></li>-->
<!--                        <li><a href="javascript:;"><span>2014-12-9</span><span>星期一</span></a></li>-->
<!--                        <li><a href="javascript:;"><span>2014-12-9</span><span>星期一</span></a></li>-->
<!--                        <li><a href="javascript:;"><span>2014-12-9</span><span>星期一</span></a></li>-->
<!--                        <li><a href="javascript:;"><span>2014-12-9</span><span>星期一</span></a></li>-->
<!--                    </ul>-->
<!--                </div>-->
                <!--表格开始-->
                <div class="table" id="queryFlight">

                    <!--表格具体内容-->
                    <div class="table-box" id="flightbox" style="display: none">
                        <table >
                            <thead>
                                <tr>
                                    <th>航空公司</th>
                                    <th>航班</th>
                                    <th>机型</th>
                                    <th>起飞机场</th>
                                    <th>起飞时间</th>
                                    <th>用时</th>
                                    <th>降落时间</th>
                                    <th>降落机场</th>
                                    <th>折扣</th>
                                    <th>票价</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="flight">
<!--                                <tr class="no-data"><td colspan="12">暂时没有数据</td></tr>-->
<!--                                <tr>-->
<!--                                    <td></td>-->
<!--                                    <td></td>-->
<!--                                    <td></td>-->
<!--                                    <td></td>-->
<!--                                    <td></td>-->
<!--                                    <td></td>-->
<!--                                    <td></td>-->
<!--                                    <td></td>-->
<!--                                    <td></td>-->
<!--                                    <td></td>-->
<!--                                    <td></td>-->
<!--                                    <td></td>-->
<!--                                </tr>-->
<!--                                <tr style="background-color: #EFF6FA;">-->
<!--                                    <td></td>-->
<!--                                    <td></td>-->
<!--                                    <td></td>-->
<!--                                    <td></td>-->
<!--                                    <td></td>-->
<!--                                    <td></td>-->
<!--                                    <td></td>-->
<!--                                    <td></td>-->
<!--                                    <td></td>-->
<!--                                    <td></td>-->
<!--                                    <td></td>-->
<!--                                    <td></td>-->
<!--                                </tr>-->
                            </tbody>
                        </table>
                    </div>
                </div><!--表格结束-->

                <div id="addPerson" style="display: none">
                    <h3 class="tsl">请填写乘坐人信息</h3>
                    <div class="kv-item clearfix">
                        <label>姓名:</label>
                        <div class="kv-item-content">
                            <input type="text" placeholder="姓名" id="takePersonName">
                        </div>
                    </div>
                    <div class="kv-item clearfix">
                        <label>身份证号:</label>
                        <div class="kv-item-content">
                            <input type="text" placeholder="身份证号" id="takePersonId">
                        </div>
                    </div>
                    <div class="kv-item clearfix">
                        <label>电话:</label>
                        <div class="kv-item-content">
                            <input type="text" placeholder="电话" id="takePersonPhone">
                        </div>
                    </div>
                    <a href="javascript:void(0);" class="sapar-btn sapar-btn-recom" id="checkPerson">确定</a>
                </div>

                <div id="ok" style="display: none">

                </div>



            </div>
        </div>
        <div id="saper-ft"></div>
    </div>
    
</body>

<script type="text/template" id="danchengtpl">
    <div class="kv-item clearfix">
        <label>出发城市：</label>
        <div class="kv-item-content">
            <input type="text" placeholder="出发城市">
        </div>
    </div>
    <div class="kv-item clearfix">
        <label>到达城市：</label>
        <div class="kv-item-content">
            <input type="text" placeholder="到达城市">
        </div>
    </div>
    <div class="kv-item clearfix">
        <label>出发时间：</label>
        <div class="kv-item-content">
            <input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" placeholder="中转时间">
        </div>
    </div>
    <a href="javascript:void(0)" class="search-trade" title="互换出发到达城市"></a>
</script>


<script type="text/template" id="wangfantpl">
    <div class="kv-item clearfix">
        <label>出发城市：</label>
        <div class="kv-item-content">
            <input type="text" placeholder="出发城市">
        </div>
    </div>
    <div class="kv-item clearfix">
        <label>到达城市：</label>
        <div class="kv-item-content">
            <input type="text" placeholder="到达城市">
        </div>
    </div>
    <div class="kv-item clearfix">
        <label>出发时间：</label>
        <div class="kv-item-content">
            <input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" placeholder="中转时间">
        </div>
    </div>
     <div class="kv-item clearfix">
        <label>返程时间：</label>
        <div class="kv-item-content">
            <input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" placeholder="中转时间">
        </div>
    </div>
    <a href="javascript:void(0)" class="search-trade" title="互换出发到达城市"></a>
</script>


<script type="text/template" id="zhongzhuantpl">
    <div class="kv-item clearfix">
        <label>出发城市：</label>
        <div class="kv-item-content">
            <input type="text" placeholder="出发城市">
        </div>
    </div>
    <div class="kv-item clearfix">
        <label>出发时间：</label>
        <div class="kv-item-content">
            <input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" placeholder="出发时间">
        </div>
    </div>
    <div class="kv-item clearfix">
        <label>中转城市：</label>
        <div class="kv-item-content">
            <input type="text" placeholder="出发城市">
        </div>
    </div>
    <div class="kv-item clearfix">
        <label>中转时间：</label>
        <div class="kv-item-content">
            <input type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" placeholder="中转时间">
        </div>
    </div>
    <div class="kv-item clearfix">
        <label>到达城市：</label>
        <div class="kv-item-content">
            <input type="text" placeholder="出发城市">    
        </div>
    </div>
     <a href="javascript:void(0)" class="search-trade" title="互换出发到达城市"></a>
</script>

<script type="text/javascript">
    var flightId="";

    $('form').on('click', 'input[type=radio]', function(){
        var tpl = $(this).attr('attr') + 'tpl';

        $('.content').html($('#'+ tpl ).html());

    });

    $('.query-btn').click(function (argument) {
        var startCity=$("#startCity").val();
        var endCity=$("#endCity").val();
        var startTime=$("#startTime").val();

        $("#flightbox").show();

        getFlight(startCity,endCity,startTime);
        // layer.load('正在查询请稍候');
    });

    function getFlight(startCity,endCity,startTime){
        $.ajax({
            type: "POST",
            url: "/getFlight",
            data: {"startCity":startCity,"endCity":endCity,"startTime":startTime},
            contentType:"application/x-www-form-urlencoded;charset=UTF-8",
            success: function(data){
                var outStr = eval('('+data+')');
                var flightstr="";
                for (var i=0;i<outStr.length;i++){
                    flightstr+="<tr>";
                    flightstr+="<td>"+outStr[i].airCompany+"</td>";
                    flightstr+="<td>"+outStr[i].flightNo+"</td>";
                    flightstr+="<td>"+outStr[i].aircraftType+"</td>";
                    flightstr+="<td>"+outStr[i].start+"</td>";
                    flightstr+="<td>"+outStr[i].startTime+"</td>";
                    flightstr+="<td>"+getDuration(outStr[i].startTime,outStr[i].endTime)+"</td>";
                    flightstr+="<td>"+outStr[i].endTime+"</td>";
                    flightstr+="<td>"+outStr[i].end+"</td>";
                    flightstr+="<td>"+outStr[i].discount+"</td>";
                    flightstr+="<td>"+outStr[i].price+"</td>";
                    flightstr+="<td><a href=\"javascript:void(0);\" onclick=\"addPerson(this);\" data-flightid="+outStr[i].ticketId+" id=flight"+i+">订票</a></td>";
                    flightstr+="</tr>";
                }
                $("#flight").html(flightstr);

            }
        });
    }

    function getDuration(startTime,endTime){
        var start=new Date(startTime);
        var end=new Date(endTime);
        return (parseInt(end-start)/1000/60/60).toFixed(2);
    }
   // layer.load('正在查询请稍候');

    function addPerson(flight){
        flightId=flight.getAttribute("data-flightid");

        $("#queryFlight").hide();
        $("#f1").hide();
        $("#addPerson").show();

        $("#l1").removeClass("active");
        $("#l2").addClass("active");
    }

    $('#exchangeCity').click(function (argument) {
        var startCity=$("#startCity").val();
        var endCity=$("#endCity").val();

        $("#startCity").val(endCity);
        $("#endCity").val(startCity);
    });

    $('#checkPerson').click(function (argument) {
        var name=$("#takePersonName").val();
        var id=$("#takePersonId").val();
        var phone=$("#takePersonPhone").val();
        $("#addPerson").hide();
        $("#ok").show();

        $("#l2").removeClass("active");
        // $("#l3").addClass("active");

        buyTicket(name,id,phone);
    });

    function buyTicket(PersonName,PersonId,PersonPhone) {
        $.ajax({
            type: "POST",
            url: "/buyTicket",
            //航班id,姓名，身份证号，电话
            data: {"flightId":flightId,"PersonName":PersonName,"PersonId":PersonId,"PersonPhone":PersonPhone},
            contentType:"application/x-www-form-urlencoded;charset=UTF-8",
            success: function(data){
                if (data=='1'){
                    $("#l3").addClass("active");
                    $("#ok").append("<p>买票成功</p>");
                }else{
                    alert("买票失败");
                }
            }
        });
    }
</script>
</html>